import './index.scss';
import React, { FC } from 'react';
import { IUserAnswer } from '../../typings';

interface IProps {
  userAnswerItem: IUserAnswer;
}

const ResultPanel: FC<IProps> = ({ userAnswerItem }) => {
  const {
    qid,
    question,
    isRight,
    url,
    explains,
    userAnswer,
    rightAnswer
  }: IUserAnswer = userAnswerItem;

  return (
    <div className="answer-show">
      <h3>题目ID:{qid}</h3>
      {url && (
        <div className="img-wrap">
          <img src={url} alt="" />
        </div>
      )}
      <p>
        <strong>该题题目：</strong>
        {question}
      </p>
      <p className={isRight ? 'green' : 'red'}>
        {isRight ? '答对了' : '答错了'}
      </p>
      <p className={isRight ? 'green' : 'red'}>
        <strong>您的答案：</strong>
        {userAnswer}
      </p>
      {!isRight && (
        <p className="green">
          <strong>正确答案：</strong>
          {rightAnswer}{' '}
        </p>
      )}
      <p
        dangerouslySetInnerHTML={{
          __html: '<strong>问题解析: </strong>' + explains
        }}
      ></p>
    </div>
  );
};

export default ResultPanel;
